import { getDepartmentList, getDoctorList, getScheduleList } from '@/api/hospital/hospitList'
import { IDepartmentList, IDoctorList, IScheduleList } from '@/api/hospital/model/hospitalListTypes'
import { Button, Card, Col, Pagination, Row, Tag, Tree } from 'antd'
import Table, { ColumnsType } from 'antd/lib/table'
import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'

export default function Schedule() {
    let { hoscode } = useParams()
    const columns: ColumnsType<any> = [
        {
            title: '序号',
            render(value: any, rows: any, index: number) {
                return (index + 1)
            }
        },
        {
            title: '职称',
            dataIndex: 'title'
        },
        {
            title: '号源时间',
            dataIndex: 'workDate'
        },
        {
            title: '总预约数',
            dataIndex: 'reservedNumber'
        },
        {
            title: '剩余预约数',
            dataIndex: 'availableNumber'
        },
        {
            title: '挂号费(元)',
            dataIndex: 'amount'
        },
        {
            title: '擅长技能',
            dataIndex: 'skill'
        }
    ]
    const [departmentList, setDepartmentList] = useState<IDepartmentList>([])
    const [expandedKeys, setExpandedKeys] = useState<string[]>([])
    let [depcode, setDepcode] = useState<string>()
    let [depname, setDepname] = useState<string>()

    let [total, setTotal] = useState<number>(10) // 总条数
    let [page, setPage] = useState<number>(1) // 当前页
    let [pageSize, SetPageSize] = useState<number>(5) // 每页条数
    let [scheduleList, setScheduleList] = useState<IScheduleList>([]) // 排班日期
    let [hosname, setHosname] = useState<string>()
    let [workDate, setWorkDate] = useState<string>() // 排班日期 2022-05-29
    let [doctorList, setDoctorList] = useState<IDoctorList>([])
    /**
     * 获取科室列表数据，并设置状态
     */
    const _getDepartmentList = async () => {
        let departmentList = await getDepartmentList(hoscode as string)
        // 控制一级科室展开效果
        // 节点展开就是将节点的唯一标识，此处是depcode，放入一个数组，将该数组给Tree组件的 expandedKeys赋值即可
        let depcodeArr = departmentList.map(department => department.depcode)
        setExpandedKeys(depcodeArr)
        console.log(departmentList)

        // 控制一级科室不能被选中，不能被选中，就是个给不能选中的节点对象添加 disabled属性【需要在类型定义中添加】
        departmentList = departmentList.map(department => {
            department.disabled = true
            return department
        })
        setDepartmentList(departmentList)
        // 设置默认科室
        setDepcode((departmentList[0].children as IDepartmentList)[0].depcode)
        setDepname((departmentList[0].children as IDepartmentList)[0].depname)

    }
    /**
     * 获取排班日期数据并设置响应状态
     */
    const _getScheduleList = async () => {
        let { total, bookingScheduleList, baseMap: { hosname } } = await getScheduleList(page, pageSize, hoscode as string, depcode as string)
        // console.log('total:', total)
        // console.log('bookingScheduleList: ', bookingScheduleList);
        // console.log('hosname: ', hosname)

        if (bookingScheduleList.length) {
            setTotal(total)
            setScheduleList(bookingScheduleList)
            setWorkDate(bookingScheduleList[0].workDate)
        }else{
            setWorkDate(undefined)
            setDoctorList([])
            setScheduleList([])
        }
        setHosname(hosname)
    }
    /**
     * 获取医生列表并渲染
     */
    const _getDoctorList = async () => {

        let doctorList = await getDoctorList(hoscode as string, depcode as string, workDate as string)
        setDoctorList(doctorList)
        console.log('doctorList: ', doctorList)
    }

    useEffect(() => {
        _getDepartmentList()
    }, [])

    useEffect(() => {
        depcode && _getScheduleList()
    }, [depcode, page, pageSize])

    useEffect(() => {
        workDate && _getDoctorList()
    }, [workDate])

    let height = document.documentElement.clientHeight - 64 - 32 - 40 - 60
    return (
        <Card>
            <div>选择：{hosname} / {depname} / {workDate}</div>
            <Row className="mt20" gutter={20}>
                <Col span={5}>
                    <div style={{ border: '1px solid #ddd', height, overflow: 'auto' }}>
                        <Tree
                            // onSelect={onSelect}
                            treeData={departmentList as []}
                            fieldNames={{
                                title: 'depname',
                                key: 'depcode'
                            }}
                            expandedKeys={expandedKeys}
                            selectedKeys={[depcode as string]}
                            onSelect={(selectedKeys: any, info: any) => {
                                // console.log('selectedKeys: ', selectedKeys)
                                // console.log('info: ', info)
                                setDepcode(info.node.depcode)
                                setDepname(info.node.depname)
                            }}
                        />
                    </div>
                </Col>
                <Col span={19}>
                    {scheduleList.map(item => (
                        <Tag key={item.workDate} color={workDate === item.workDate ? 'green' : ''} onClick={() => {
                            setWorkDate(item.workDate)
                        }}>
                            <div>{item.workDate} {item.dayOfWeek}</div>
                            <div>{item.availableNumber} / {item.reservedNumber}</div>
                        </Tag>
                    ))}


                    <Pagination
                        className="mt20"
                        current={page}
                        pageSize={pageSize}
                        total={total}
                        showSizeChanger={true}
                        pageSizeOptions={[5, 10, 15]}
                        onChange={(page: number, pageSize: number) => {
                            setPage(page)
                            SetPageSize(pageSize)
                        }}
                    />

                    <Table
                        rowKey={'id'}
                        className="mt20"
                        columns={columns}
                        dataSource={doctorList}
                    />
                    <Button className="mt20">返回</Button>
                </Col>
            </Row>
        </Card>
    )
}
